<html><head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>workerman-chat PHP聊天室 Websocket(HTLM5/Flash)+PHP多进程socket实时推送技术</title>
    <link href="/public/css/bootstrap.min.css" rel="stylesheet">
    <link href="/public/css/style.css" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="/public/wangEditor/dist/css/wangEditor.min.css">
    <style>
        #editor-trigger {
            height: 200px;
            /*max-height: 500px;*/
        }
        .container {
            width: 720px;
            margin: 0 auto;
            position: relative;
        }
        /*外框样式*/
        .bubbleDiv{
            width: 700px;
            margin: 0 auto;
            height: 600px;
            border: 1px solid #4a4f58;
            border-radius: 10px;
            border-color: #0d6fb8;
            overflow-y: scroll;
        }
        /*对话样式*/
        .bubbleItem{
            width: 100%;
            clear: both;
        }
        .bubble{
            max-width: 400px;
            position: relative;
            line-height: 30px;
            padding-left: 10px;
            padding-top: 3px;
            padding-bottom: 3px;
            border-radius: 7px;
            margin-top: 15px;
            padding-right: 10px;
            display: inline-block;
        }
        .leftBubble{
            position: relative;
            margin-left: 25px;
            border: 1px solid #00b6b6;
            background-color: #f8fdfc;
            margin-bottom: 10px;
        }
        .leftBubble .bottomLevel{
            position: absolute;
            top: 10px;
            left: -10px;
            border-top: 10px solid #00b6b6;
            border-left: 10px solid transparent;
        }
        .leftBubble .topLevel{
            position: absolute;
            top: 11px;
            left: -8px;
            border-top: 10px solid #f8fdfc;
            border-left: 10px solid transparent;
            z-index: 100;
        }
        .rightBubble{
            position: relative;
            margin-right: 25px;
            float: right;
            border: 1px solid #aaa;
            margin-bottom: 10px;
        }
        .rightBubble .bottomLevel{
            position: absolute;
            bottom: 11px;
            right: -10px;
            border-bottom: 10px solid #aaa;
            border-right: 10px solid transparent;
        }
        .rightBubble .topLevel{
            position: absolute;
            bottom: 12px;
            right: -8px;
            border-bottom: 10px solid #fff;
            border-right: 10px solid transparent;
            z-index: 100;
        }
        .leftTitle {
            position:relative;
            margin : 10px 0px 0px 15px;
        }
        .rightTitle {
            position:relative;
            margin : 10px 15px 0px 0px;
            float: right;
        }
        .msgBox > .loginIn {
            padding: auto;
            color: #0d6fb8;
            text-align: center;
        }
        .msgBox > .loginOut {
            margin:10px auto;
            color: #888888;
            text-align: center;
        }
        .msgBox:after{
            content: '';
            display: block;
            clear: both;
        }
        .commit{
            width: 700px;
            margin:10px auto;
            text-align: right;
        }
        .commit > .chat{
            margin-right:10px;
        }
    </style>
    <script type="text/javascript" src="/public/js/swfobject.js"></script>
    <script type="text/javascript" src="/public/js/web_socket.js"></script>
    <script type="text/javascript" src="/public/js/jquery.min.js"></script>

    <script type="text/javascript">
        if (typeof console == "undefined") {    this.console = { log: function (msg) {  } };}
        // 如果浏览器不支持websocket，会使用这个flash自动模拟websocket协议，此过程对开发者透明
        WEB_SOCKET_SWF_LOCATION = "/public/swf/WebSocketMain.swf";
        // 开启flash的websocket debug
        WEB_SOCKET_DEBUG = true;
        var ws, name, client_list={},client_id;
        var room_id = <?=$room_id?>
        // 连接服务端
        function connect() {
            // 创建websocket
            ws = new WebSocket("ws://"+document.domain+":8282");
            // 当socket连接打开时，输入用户名
            ws.onopen = onopen;
            // 当有消息时根据消息类型显示不同信息
            ws.onmessage = onmessage;
            ws.onclose = function() {
                console.log("连接关闭，定时重连");
                connect();
            };
            ws.onerror = function() {
                console.log("出现错误");
            };
        }

        // 连接建立时发送登录信息
        function onopen()
        {
//            if(!name)
//            {
//                show_prompt();
//            }
        }

        // 服务端发来消息时
        function onmessage(e)
        {
            var data = eval("("+e.data+")");
            switch (data['type']){
                case 'init' : // 利用jquery发起ajax请求，将client_id发给后端进行uid绑定
                    client_id = data.client_id;
                    $.post('<?=$bindUid?>', {client_id: data.client_id,room_id:room_id}, function(resData){
                        var res = eval(resData);
                        if(res.flag != 1){
//                            window.location.href = "www.baidu.com";
                            alert("神经病");
                        }else{
                            ws.send('{"type":"connect","room_id":"'+room_id+'","name":"'+res.name+'"}');
                        }
                    }, 'json');
                    break;
                case 'ping' : ws.send('{"type":"pong"}');
                    break;
                case 'login' :
                    var _login = '<div class="msgBox"><p class="loginIn">'+data['username']+' 进入了房间</p></div>';
                    $(".bubbleDiv").append(_login);
                    break;
                case 'say'   :
                    var _msg = '';
                    if(data['say_type'] == 1){ //自己发言
                        _msg += '<div class="msgBox">' +
                            '<div class="rightTitle"><span>'+data['username']+'</span></div>' +
                            '<div class="bubbleItem"><span class="bubble rightBubble">'+data['chat']+'<span class="bottomLevel"></span>' +
                            '<span class="topLevel"></span></span></div></div>';
                    }else{ //接收信息
                        _msg += '<div class="msgBox">' +
                            '<div class="leftTitle"><span>'+data['username']+'</span></div>' +
                            '<div class="bubbleItem"><span class="bubble leftBubble">'+data['chat']+'<span class="bottomLevel"></span>' +
                            '<span class="topLevel"></span></span></div></div>';
                    }
                    if(data['chat_time'] != 0){
                        var _time = '<div class="msgBox"><p class="loginOut">'+data['chat_time']+'</p></div>';
                        $(".bubbleDiv").append(_time);
                    }
                    $(".bubbleDiv").append(_msg);
                    break;
                case 'logout'   :
                    var _logout = '<div class="msgBox"><p class="loginOut">'+data['username']+' 离开了房间</p></div>';
                    $(".bubbleDiv").append(_logout);
                    break;
                case 'connect' : break;
                case 'fedback' : break;
                default :
                var _error = '<div class="msgBox"><p class="loginOut">系统异常</p></div>';
                $(".bubbleDiv").append(_error);
            }
            var div = document.getElementById('bubbleDiv2');
            div.scrollTop = div.scrollHeight;
        }

        // 输入姓名
        function show_prompt(){
            name = prompt('输入你的名字：', '');
            if(!name || name=='null'){
                name = '游客';
            }
        }

        $(function () {
            $(".push-chat").on('click',function () {
                var _chat = editor.$txt.html();
                if(_chat == ''){
                    alert("请输入内容");
                    $("input[name='chat']").focus();
                }else{
                    var _time = Date.parse(new Date());
//                    _chat =_chat.replace(/"/g, '\\"').replace(/\n/g,'\\n').replace(/\r/g, '\\r');
                    $.post("<?=$sayUrl?>",{"type":"say","chat":_chat,"room_id":room_id,"client_id":client_id,"chat_time" : _time},function (res) {
                        var resD = JSON.parse(res);
                        if(resD['flag'] !=1){
                            var _logout = '<div class="msgBox"><p class="loginOut">发言失败，稍后再试</p></div>';
                            $(".bubbleDiv").append(_logout);
                        }
                    });
                    $("#editor-trigger").text("");
                    $("#editor-trigger").focus();
                }
            })
        })
    </script>
</head>
<body onload="connect();">
<div class="bubbleDiv" id="bubbleDiv2">
</div>
<div id="editor-container" class="container">
    <div id="editor-trigger"></div>
</div>
<div class="commit"><button class="btn btn-danger chat">关闭</button><button class="btn btn-danger push-chat">发送</button></div>
</body>
<script type="text/javascript" src="/public/wangEditor/dist/js/lib/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="/public/wangEditor/dist/js/wangEditor.js"></script>
<script type="text/javascript">

    // 阻止输出log
     wangEditor.config.printLog = false;

    var editor = new wangEditor('editor-trigger');
    editor.config.menus = [
        'emotion',
        'img',
    ];
    // 上传图片
    editor.config.uploadImgUrl = '/upload';
    editor.config.uploadParams = {
        // token1: 'abcde',
        // token2: '12345'
    };
    editor.config.uploadHeaders = {
        // 'Accept' : 'text/x-json'
    }
    // editor.config.uploadImgFileName = 'myFileName';
    editor.config.pasteText = false;

    // 隐藏网络图片
     editor.config.hideLinkImg = true;

    // 表情显示项
//    editor.config.emotionsShow = 'value';
    editor.config.emotions = {
        "AA" : {
            title : '<img src="http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/ac/smilea_thumb.gif" width="20px" height="20px" title="经典表情"',
            data  : [
                {
                    icon : "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/7a/shenshou_thumb.gif",
                    value : "[草泥马]"
                },
                {
                    icon : "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/ac/smilea_thumb.gif",
                    value : "[呵呵]"
                },
                {
                    icon : "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/0b/tootha_thumb.gif",
                    value : "[嘻嘻]"
                },
                {
                    icon : "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/6a/laugh.gif",
                    value : "[哈哈]"
                },
                {
                    icon : "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/14/tza_thumb.gif",
                    value : "[可爱]"
                },
                {
                    icon : "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/af/kl_thumb.gif",
                    value : "[可怜]"
                },
                {
                    icon : "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/a0/kbsa_thumb.gif",
                    value : "[挖鼻屎]"
                },
                {
                    icon : "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/f4/cj_thumb.gif",
                    value : "[吃惊]"
                },
                {
                    icon : "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/6e/shamea_thumb.gif",
                    value : "[害羞]"
                },
                {
                    icon : "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/c3/zy_thumb.gif",
                    value : "[挤眼]"
                },
                {
                    icon : "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/29/bz_thumb.gif",
                    value : "[闭嘴]"
                },
                {
                    icon : "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/71/bs2_thumb.gif",
                    value : "[鄙视]"
                },
                {
                    icon : "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/6d/lovea_thumb.gif",
                    value : "[爱你]"
                },
                {
                    icon : "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/9d/sada_thumb.gif",
                    value : "[泪]"
                },
                {
                    icon : "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/19/heia_thumb.gif",
                    value : "[偷笑]"
                },
                {
                    icon : "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/8f/qq_thumb.gif",
                    value : "[亲亲]"
                },
                {
                    icon : "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/b6/sb_thumb.gif",
                    value : "[生病]"
                },
                {
                    icon : "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/58/mb_thumb.gif",
                    value : "[太开心]"
                },
                {
                    icon : "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/17/ldln_thumb.gif",
                    value : "[懒得理你]"
                },
                {
                    icon : "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/98/yhh_thumb.gif",
                    value : "[右哼哼]"
                },
                {
                    icon : "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/6d/zhh_thumb.gif",
                    value : "[左哼哼]"
                },
                {
                    icon : "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/a6/x_thumb.gif",
                    value : "[嘘]"
                },
                {
                    icon : "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/af/cry.gif",
                    value : "[衰]"
                },
                {
                    icon : "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/73/wq_thumb.gif",
                    value : "[委屈]"
                },
                {
                    icon : "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/9e/t_thumb.gif",
                    value : "[吐]"
                }, {
                    icon : "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/f3/k_thumb.gif",
                    value : "[打哈欠]"
                }, {
                    icon : "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/27/bba_thumb.gif",
                    value : "[抱抱]"
                }, {
                    icon : "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/7c/angrya_thumb.gif",
                    value : "[怒]"
                }, {
                    icon : "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/5c/yw_thumb.gif",
                    value : "[疑问]"
                }, {
                    icon : "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/a5/cza_thumb.gif",
                    value : "[馋嘴]"
                }, {
                    icon : "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/70/88_thumb.gif",
                    value : "[拜拜]"
                }, {
                    icon : "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/e9/sk_thumb.gif",
                    value : "[思考]"
                }, {
                    icon : "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/24/sweata_thumb.gif",
                    value : "[汗]"
                }, {
                    icon : "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/7f/sleepya_thumb.gif",
                    value : "[困]"
                }, {
                    icon : "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/6b/sleepa_thumb.gif",
                    value : "[睡觉]"
                }, {
                    icon : "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/90/money_thumb.gif",
                    value : "[钱]"
                }, {
                    icon : "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/0c/sw_thumb.gif",
                    value : "[失望]"
                }, {
                    icon : "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/40/cool_thumb.gif",
                    value : "[酷]"
                }, {
                    icon : "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/8c/hsa_thumb.gif",
                    value : "[花心]"
                }, {
                    icon : "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/49/hatea_thumb.gif",
                    value : "[哼]"
                }, {
                    icon : "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/36/gza_thumb.gif",
                    value : "[鼓掌]"
                }, {
                    icon : "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/d9/dizzya_thumb.gif",
                    value : "[晕]"
                }, {
                    icon : "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/1a/bs_thumb.gif",
                    value : "[悲伤]"
                }, {
                    icon : "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/62/crazya_thumb.gif",
                    value : "[抓狂]"
                }, {
                    icon : "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/91/h_thumb.gif",
                    value : "[黑线]"
                }, {
                    icon : "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/6d/yx_thumb.gif",
                    value : "[阴险]"
                }, {
                    icon : "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/89/nm_thumb.gif",
                    value : "[怒骂]"
                },{
                    icon : "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/40/hearta_thumb.gif",
                    value : "[心]"
                }, {
                    icon : "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/ea/unheart.gif",
                    value : "[伤心]"
                }, {
                    icon : "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/58/pig.gif",
                    value : "[猪头]"
                }, {
                    icon : "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/d6/ok_thumb.gif",
                    value : "[ok]"
                }, {
                    icon : "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/d9/ye_thumb.gif",
                    value : "[耶]"
                }, {
                    icon : "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/d8/good_thumb.gif",
                    value : "[good]"
                }, {
                    icon : "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/c7/no_thumb.gif",
                    value : "[不要]"
                }, {
                    icon : "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/d0/z2_thumb.gif",
                    value : "[赞]"
                }, {
                    icon : "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/40/come_thumb.gif",
                    value : "[来]"
                }, {
                    icon : "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/d8/sad_thumb.gif",
                    value : "[弱]"
                }, {
                    icon : "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/91/lazu_thumb.gif",
                    value : "[蜡烛]"
                }, {
                    icon : "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/6a/cake.gif",
                    value : "[蛋糕]"
                },{
                    icon : "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/15/j_thumb.gif",
                    value : "[囧]"
                },
                {
                    icon : "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/89/hufen_thumb.gif",
                    value : "[互粉]"
                }
            ]
        },
        "BB" : {
            title : '<img src="http://q.qqbiaoqing.com/q/2011-8-3/e79d7625328975f0dc93d9921a2464d8.gif" width="20px" height="20px" title="经典表情"',
            data  :  [
                {
                    icon : "http://q.qqbiaoqing.com/q/2011-8-3/e79d7625328975f0dc93d9921a2464d8.gif",
                    value : "[高烧发汗]"
                },
                {
                    icon : "http://q.qqbiaoqing.com/q/2011-8-3/c6b3e0b735cfe7eb8af9c4f9fab643de.gif",
                    value : "[眨眼睛]"
                },
                {
                    icon : "http://q.qqbiaoqing.com/q/2011-8-3/c435c5726f7dd0609a2f203a39ae51fe.gif",
                    value : "[吻一个]"
                },
                {
                    icon : "http://q.qqbiaoqing.com/q/2011-8-3/9e8d4a9998605b6885adef2a4a1c6d77.gif",
                    value : "[吃午餐]"
                },
                {
                    icon : "http://q.qqbiaoqing.com/q/2011-8-3/d150c575b9f39820e4cf3125d5c00069.gif",
                    value : "[发音练习]"
                },
                {
                    icon : "http://q.qqbiaoqing.com/q/2011-8-3/a934ab6c5c9eb4f2b8eb05019816db8c.gif",
                    value : "[跌倒]"
                },
                {
                    icon : "http://q.qqbiaoqing.com/q/2011-8-3/c47afe3ed1d340017d4efd0e94307e64.gif",
                    value : "[么么]"
                },
                {
                    icon : "http://q.qqbiaoqing.com/q/2011-8-3/a0f5b7cfce78a74d551f7b4628476573.gif",
                    value : "[高烧发汗]"
                },
                {
                    icon : "http://q.qqbiaoqing.com/q/2011-8-3/e79d7625328975f0dc93d9921a2464d8.gif",
                    value : "[一脚踢飞]"
                },
                {
                    icon : "http://q.qqbiaoqing.com/q/2011-8-3/31e4bd5d1612a5e2a3278d33beafed3a.gif",
                    value : "[路过]"
                },
                {
                    icon : "http://q.qqbiaoqing.com/q/2011-8-3/90d43c0912e46ea66637f525f0ed6da6.gif",
                    value : "[泪流满面]"
                },
                {
                    icon : "http://q.qqbiaoqing.com/q/2011-8-3/821b8ac4670b67ec1f334206d38c161d.gif",
                    value : "[反复路过]"
                },
                {
                    icon : "http://q.qqbiaoqing.com/q/2011-8-3/605e97395c4c7a36cc0cad3274e0be6f.gif",
                    value : "[被囧到了]"
                },
                {
                    icon : "http://q.qqbiaoqing.com/q/2011-8-3/319dcef4a7bac17599bf70e9866a3fd5.gif",
                    value : "[高烧发汗]"
                },
                {
                    icon : "http://q.qqbiaoqing.com/q/2011-8-3/e79d7625328975f0dc93d9921a2464d8.gif",
                    value : "[无聊]"
                },
                {
                    icon : "http://q.qqbiaoqing.com/q/2011-8-3/3d8496aed1c689c72b436b569ee24de1.gif",
                    value : "[顶呱呱]"
                },
                {
                    icon : "http://q.qqbiaoqing.com/q/2011-8-3/e073d7d5955d57c30dc6d0d37210e470.gif",
                    value : "[鼓掌]"
                }
            ]
        }
    }

    // 插入代码时的默认语言
    // editor.config.codeDefaultLang = 'html'

    // 只粘贴纯文本
    // editor.config.pasteText = true;

    // 跨域上传
     editor.config.uploadImgUrl = 'http://ab.jdhui.com/admin/site/upload';

    // 第三方上传
    // editor.config.customUpload = true;

    // 普通菜单配置
    // editor.config.menus = [
    //     'img',
    //     'insertcode',
    //     'eraser',
    //     'fullscreen'
    // ];
    // 只排除某几个菜单（兼容IE低版本，不支持ES5的浏览器），支持ES5的浏览器可直接用 [].map 方法
    // editor.config.menus = $.map(wangEditor.config.menus, function(item, key) {
    //     if (item === 'insertcode') {
    //         return null;
    //     }
    //     if (item === 'fullscreen') {
    //         return null;
    //     }
    //     return item;
    // });

    // onchange 事件
    editor.onchange = function () {
//        console.log(this.$txt.html());
    };

    // 取消过滤js
    // editor.config.jsFilter = false;

    // 取消粘贴过来
    // editor.config.pasteFilter = false;

    // 设置 z-index
    // editor.config.zindex = 20000;

    // 语言
    // editor.config.lang = wangEditor.langs['en'];

    editor.create();
    $(function () {
        $("#editor-trigger").focus();
    })
</script>
</html>

